<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <header>
    <a href="#" class="logo">xiaolidu11</a>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">首页</a></li>
      <li><a href="#">首页</a></li>
      <li><a href="#">首页</a></li>
    </ul>
    <div class="search">
      <input type="text" placeholder="search">
      <i class="fa fa-search"></i>
    </div>
  </header>
  <div class="banner">
    <div class="content">
      <h2>响应式布局</h2>
      <p>
        响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。
        传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够了。
        响应式设计与自适应设计的区别：响应式开发一套界面，
        通过检测视口分辨率，针对不同客户端在客户端做代码处理，
        来展现不同的布局和内容；自适应需要开发多套界面，
        通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，
        从而请求服务层，返回不同的页面。CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，
        当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
      </p>
      <a href="#">阅读全文</a>
    </div>
    <img src="../lanjiazai.jpg" alt="" class="image">
  </div>
</body>

</html>